<template>
  <el-card body-style="min-height: 86vh">
    <div class="flex items-center mb-4">
      <span class="text-2xl"
        >账号余额:<span class="font-bold text-red-500">{{ costInfo.checkNum || 0 }}</span
        >条</span
      >
      <div class="flex text-2xl ml-12">
        已充值金额:
        <el-statistic
          :value="totalPrice"
          :precision="2"
          :value-style="{
            fontSize: '24px',
            fontWeight: 'bold',
            color: 'red'
          }"
        />元
      </div>
      <div class="flex items-center ml-12">
        <span class="mr-2 text-2xl">充值数量</span>
        <el-input
          v-model="num"
          v-integer-number
          style="width: 240px"
          :placeholder="`单价${price}元/条`"
        />
        <el-button type="primary" class="ml-2" @click="handlePay">充值</el-button>
      </div>
    </div>
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="支付时间">
            <el-date-picker
              v-model="searchForm.payTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleSearch()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div></div>
      <div>
        <el-button circle @click="handleReflesh">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column label="订单号" prop="orderNo" align="center" />
      <el-table-column label="充值条数" prop="num" width="180" align="center" />
      <el-table-column label="支付金额(元)" prop="rechargeAmount" width="180" align="center">
        <template #default="{ row }">
          {{ row.rechargeAmount / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="支付状态" prop="status" width="180" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="success">已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" prop="payTime" width="180" align="center" />
      <el-table-column label="创建时间" prop="createTime" width="180" align="center" />
      <!-- <el-table-column label="操作" width="180" align="center">
        <template #default="{ row }">
          <el-button type="primary">确定</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <el-dialog v-model="isShowPay" title="确定充值" width="400" @close="handleReflesh()">
      <div class="flex flex-col items-center h-[400px]">
        <div class="text-[24px] font-bold text-red-500">充值金额:{{ payTotal }}元</div>
        <el-image :src="wxImg" :loading="true" style="width: 400px; height: 400px"> </el-image>
      </div>
    </el-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { ElMessage } from "element-plus";
import QRCode from "qrcode";
import dayjs from "dayjs";
import { useInitTable } from "@/hooks/useCommon";
import {
  getSecondMaintaionCostInfoApi,
  getSecondMaintainCostRecordPageApi,
  paySecondMatintainConstApi,
  getSecondMaintainEveryApi
} from "@/api/second";

const totalPrice = computed(() => {
  const total = costInfo.value.totalCheckRechargeAmount || 0;
  return total / 100;
});
// 表格
const { searchForm, tableData, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      status: 1,
      payTime: []
    },
    getTableList: getSecondMaintainCostRecordPageApi
  });

// 搜索
const handleSearch = () => {
  if(searchForm.payTime.length){
    const endTime = searchForm.payTime[1];
    searchForm.payTime[1] = dayjs(endTime).format("YYYY-MM-DD 23:59:59");
  }
  handleGetTableList();
};
// 刷新
const handleReflesh = () => {
  handleGetCostInfo();
  handleGetTableList();
};
// 充值
const num = ref("");
const isShowPay = ref(false);
const handleChangePay = () => {
  isShowPay.value = !isShowPay.value;
};
const handlePay = () => {
  if (!num.value) {
    return ElMessage.error("请输入充值数量");
  }
  handleWxPay();
};

// 微信充值
const wxImg = ref("");
const handleWxPay = async () => {
  try {
    const res: any = await paySecondMatintainConstApi({
      num: num.value
    });
    const wxRes = await QRCode.toDataURL(res.code_url, { width: 400 });
    wxImg.value = wxRes;
    handleChangePay();
  } catch (error) {
    console.log(error);
  }
};

// 获取二级维护费用详情
const costInfo = ref<any>({});
const handleGetCostInfo = async () => {
  const res = await getSecondMaintaionCostInfoApi();
  costInfo.value = res;
};
// 获取二级维护每条充值费用
const price = ref(0);
const handleGetSecondMaintainEvery = async () => {
  const res: any = await getSecondMaintainEveryApi({
    key: "check_const_price"
  });
  price.value = Number(res.dictValue) / 100;
};

// 预计充值
const payTotal = computed(() => {
  return Number(num.value) * price.value;
});
onMounted(() => {
  handleGetCostInfo();
  handleGetSecondMaintainEvery();
});
</script>
<style scoped lang="scss"></style>
